import React from 'react'
import niuStyle from './niu10ren.css'

const Ten = (props) => {
  const { battleData, gameInfo, ruleDesc, backroom } = props
  const { finishList, room } = battleData
  const time = window.util.getDateTime(room.createTime)
  const bodyCn = niuStyle['game-body'] + ' pure-g'
  return <div className="full">
    <div className="game-bg">
      <img src="img/bullShare/ten/tenniu-di.png" className="bg-image" alt="" />
    </div>
    <div className={niuStyle['game-info']}>
      <div className={niuStyle['game-info-row']}>
        <span className="pull-left">帅帅游戏 {gameInfo.name}</span>
        <span className="pull-right">{time}</span>
      </div>
      <div className={niuStyle['game-info-row']}>
        <span className="pull-left">房号: {room.roomNo} &nbsp; 局数: {room.turns} / {room.totalTurns}</span>
        <span className="pull-right">玩法: {ruleDesc}</span>
      </div>
    </div>

    <div className={bodyCn}>
      {
        finishList.map((player, index) => {
          const bgSrc = player.point > 0 ? 'img/bullShare/ten/tenniu-light.png' : 'img/bullShare/ten/tenniu-default.png'
          const nicknameCn = player.point > 0 ? 'crimson' : 'black'
          const labelCn = niuStyle['game-body-label'] + ' relative'
          const pointCn = player.point > 0 ? niuStyle['win'] : ''
          return <div className={labelCn} key={index}>
            <div className={niuStyle['card']}>
              <img className={niuStyle['card-bg']} src={bgSrc} alt="" />
              <div className={nicknameCn + ' ' + niuStyle['player-nickname']}>{player.nickname}</div>
              <div className={niuStyle['player-id']}>
                <span>{player.lftId}</span>
              </div>
              <div className={niuStyle['score-detail']}>
                <span className={pointCn}>{player.point}</span>
              </div>
              {
                player.winner ? <img className={niuStyle['big-winner']} src="img/bullShare/ten/big-winner.png" alt="" /> : null
              }
              {
                player.owner ? <img className={niuStyle['owner']} src="img/bullShare/owner.png" alt=""/> : null
              }
            </div>
          </div>
        })
      }
    </div>

    <div className={niuStyle['gamble-tip']}>
      游戏结果仅作娱乐用途,禁止用于赌博行为
    </div>

    <div className="game-bottom pure-g">
      <div className="pure-u-1-2 text-center">
        <img onClick={backroom} src="img/bullShare/back-room.png" alt="" />
      </div>
      <div className="pure-u-1-2 text-center">
        <img src="img/bullShare/btn-share.png" alt="" />
      </div>
    </div>

  </div> 
}

export default Ten